<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/我的分页/topbase.css">
    <script src="../../js/rem.js"></script>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1432742_38c12wietbu.css">
    <link rel="stylesheet" href="../../css/我的分页/add_address.css">
    <script src="../../js/jquery-1.11.3.min.js"></script>
    <!-- <link rel="stylesheet" href="../../css/bootstrap.min.css"> -->
    <script src="../../js/city.js"></script>
    <script src="../../js/picker.min.js"></script>
    <script src="../../js/base.js"></script>
    <script src="../../js/comment.js"></script>
    <script src="../../js/api.js"></script>
    <script>
        window.onload = function () {
            console.log(id);

            function lt(l, t) {
                $(".tips").css({
                    left: `${l}rem`,
                    top: `${t}rem`
                })
            }
            let str = location.search.slice(1)
            let obj = parseQuery(str)
            let id1 = obj.id
            //新增地址
            function xinzeng() {
                $(function () {
                    // 新增收获地址
                    $('.save').click(function () {
                        let yan1 = /^(13[0-9]|14[0-9]|15[0-9]|18[0-9]|17[0-9])\d{8}$/
                        let name = ($('#name').val()).replace(/\s/g, '')
                        if (name == '') {
                            let tip = '你没有填写收货人'
                            tipp(tip, 'footer')
                            lt('2.3', '7')
                            return;
                        }
                        let phonev = $("#phone").val()
                        if (phonev == '') {
                            let tip = '你没有填写手机号码'
                            tipp(tip, 'footer')
                            lt('2', '7')
                            return;
                        }
                        if (!yan1.test(phonev)) {
                            let tip = '手机号格式有误，请重新输入'
                            tipp(tip, 'footer')
                            lt('1.5', '7')
                            return;
                        }

                        let address = $(".btn-info").text()
                        let detailaddress = $('#addx').val()
                        if (address == '请选择收获地区') {
                            let tip = '请选择收获地区'
                            tipp(tip, 'footer')
                            lt('2.3', '7')
                            return;
                        }
                        console.log(address);
                        if ($("#addx").val() == '') {
                            let tip = '请填写详细地址'
                            tipp(tip, 'footer')
                            lt('2.3', '7')
                            return;
                        }
                        let addressType = '公司'
                        if ($('#addtype1:checked').val()) {
                            addtype = '公司'
                            console.log(addtype);
                        }
                        if ($('#addtype2:checked').val()) {
                            addtype = '家庭'
                            console.log(addtype);
                        }
                        // 判断是否设置默认地址
                        let hasclass = $('.van-switch').hasClass('van-switch--on')
                        let defaultAddress = 0;
                        if (hasclass) {
                            defaultAddress = 1;
                        } else {
                            defaultAddress = 0;
                        }
                        //默认地址true/false
                        let normal_add = $(".van-switch").attr("aria-checked")
                        console.log(id);
                        $.post(newAddress_Api, {
                            name: name,
                            address,
                            addressType,
                            userId: id,
                            phonenum: phonev,
                            defaultAddress
                        }, function (date) {
                            console.log(date);
                            location.href = './address.html'
                        })
                    })
                    //禁非数字键
                    var ph = document.querySelector('#phone')
                    ph.oninput = function () {
                        document.onkeydown = function () {
                            let k = event.keyCode
                            if ((k <= 57 && k >= 48) || (k <= 105 && k >= 96) || (k == 8)) {
                                return true;
                            } else {
                                return false;
                            }
                        }
                    }

                })
            }
            
            //判断是修改还是保存
            if (id1) {
                $('h1').text('修改收获地址')
                // 根据地址id添加到页面上+++++++
                $.get(editAddress, {
                    id: id1,
                }, function (v) {
                    console.log(v);
                    $('#name').val(v.name)
                    $('#phone').val(v.phonenum)
                    $('#sel_city').text(v.address)
                    if (v.defaultAddress == 1) {
                        $('.van-switch').addClass('van-switch--on')
                    }
                    //addressType
                    if (v.addressType == 'fdf') {
                        console.log(1);
                        $('#addtype1').attr('::after')
                    } else {
                        $('#addtype1').clone().replaceWith('#addtype2')
                    }
                    editaddress()
                })
            } else {
                $('h1').text('新增收获地址')
                xinzeng()
            }

            //保存当前修改的地址
            function editaddress() {
                // 获取修改后的数据
                let name = ($('#name').val()).replace(/\s/g, '')
                let phonev = $("#phone").val()
                let addressType = '公司'
                let address = $(".btn-info").text()
                if ($('#addtype1:checked').val()) {
                    addtype = '公司'
                    console.log(addtype);
                }
                if ($('#addtype2:checked').val()) {
                    addtype = '家庭'
                    console.log(addtype);
                }
                // 判断是否设置默认地址
                let hasclass = $('.van-switch').hasClass('van-switch--on')
                console.log(hasclass);
                if (hasclass) {
                    let defaultAddress = 1;
                } else {
                    defaultAddress = 0
                }
                console.log(name, address, addressType, id, id1);
                $('.save').click(function () {
                    $.post(editAddress2, {
                        name: name,
                        address,
                        addressType,
                        userId: id,
                        phonenum: phonev,
                        defaultAddress,
                        id: id1
                    }, function (data) {
                        console.log(data);
                    })
                })
            }
        }
    </script>
</head>

<body>
    <header>
        <a href="./address.html">
            <div class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-1"></div>
        </a>
        <h1></h1>
        <span class="save">保存</span>
    </header>
    <main>
        <form action="">
            <label for="name">收货人姓名:
                <input type="text" id="name">
            </label>
            <label for="phone">手机号码:
                <input type="text" id="phone">
            </label>


            <label for="add">所在地区:
                <div class="container">
                    <div class="row main">
                        <div class="col-md-12">
                            <div class="row" style="margin-top: 30px; text-align: center;">

                                <a href="#" class="btn btn-info btn-lg active" role="button" id="sel_city">请选择收获地区</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <input type="text" id="add"> -->
                <span class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"></span>
            </label>
            <label for="addx">详细地址:
                <input type="text" id="addx">
            </label>
            <label for="">地址类型:
                <input class="radio_type" type="radio" name="name" id="addtype1" checked>&nbsp;&nbsp;公司
                <input class="radio_type" type="radio" name="name" id="addtype2">&nbsp;&nbsp;家庭
            </label>
        </form>
    </main>
    <footer>
        <div>
            <p>设置默认地址</p>
            <div id="ne"></div>
        </div>
    </footer>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>
    <script>
        // 在 #app 标签下渲染一个按钮组件
        new Vue({
            el: '#ne',
            template: `<van-switch v-model="checked" size="0.3rem" />`,
            data() {
                return {
                    checked: false
                };
            }
        });

        // 调用函数组件，弹出一个 Toast
        // vant.Toast('提示');
        $('a').click(function () {
            var href = $(this).attr('href');
            if (!href || /^(javascript:)|#/.test(href)) return;
            window.location.href = href;
            loading();
            return false;
        });

        function loading() {
            $('body').html('加载中效果');
            return false;
        }
    </script>
    <script>
        var nameEl = document.getElementById('sel_city');

        var first = []; /* 省，直辖市 */
        var second = []; /* 市 */
        var third = []; /* 镇 */

        var selectedIndex = [0, 0, 0]; /* 默认选中的地区 */

        var checked = [0, 0, 0]; /* 已选选项 */

        function creatList(obj, list) {
            obj.forEach(function (item, index, arr) {
                var temp = new Object();
                temp.text = item.name;
                temp.value = index;
                list.push(temp);
            })
        }

        creatList(city, first);

        if (city[selectedIndex[0]].hasOwnProperty('sub')) {
            creatList(city[selectedIndex[0]].sub, second);
        } else {
            second = [{
                text: '',
                value: 0
            }];
        }

        if (city[selectedIndex[0]].sub[selectedIndex[1]].hasOwnProperty('sub')) {
            creatList(city[selectedIndex[0]].sub[selectedIndex[1]].sub, third);
        } else {
            third = [{
                text: '',
                value: 0
            }];
        }

        var picker = new Picker({
            data: [first, second, third],
            selectedIndex: selectedIndex,
            title: '地址选择'
        });

        picker.on('picker.select', function (selectedVal, selectedIndex) {
            var text1 = first[selectedIndex[0]].text;
            var text2 = second[selectedIndex[1]].text;
            var text3 = third[selectedIndex[2]] ? third[selectedIndex[2]].text : '';

            nameEl.innerText = text1 + ' ' + text2 + ' ' + text3;
        });

        picker.on('picker.change', function (index, selectedIndex) {
            if (index === 0) {
                firstChange();
            } else if (index === 1) {
                secondChange();
            }

            function firstChange() {
                second = [];
                third = [];
                checked[0] = selectedIndex;
                var firstCity = city[selectedIndex];
                if (firstCity.hasOwnProperty('sub')) {
                    creatList(firstCity.sub, second);

                    var secondCity = city[selectedIndex].sub[0]
                    if (secondCity.hasOwnProperty('sub')) {
                        creatList(secondCity.sub, third);
                    } else {
                        third = [{
                            text: '',
                            value: 0
                        }];
                        checked[2] = 0;
                    }
                } else {
                    second = [{
                        text: '',
                        value: 0
                    }];
                    third = [{
                        text: '',
                        value: 0
                    }];
                    checked[1] = 0;
                    checked[2] = 0;
                }

                picker.refillColumn(1, second);
                picker.refillColumn(2, third);
                picker.scrollColumn(1, 0)
                picker.scrollColumn(2, 0)
            }

            function secondChange() {
                third = [];
                checked[1] = selectedIndex;
                var first_index = checked[0];
                if (city[first_index].sub[selectedIndex].hasOwnProperty('sub')) {
                    var secondCity = city[first_index].sub[selectedIndex];
                    creatList(secondCity.sub, third);
                    picker.refillColumn(2, third);
                    picker.scrollColumn(2, 0)
                } else {
                    third = [{
                        text: '',
                        value: 0
                    }];
                    checked[2] = 0;
                    picker.refillColumn(2, third);
                    picker.scrollColumn(2, 0)
                }
            }

        });

        picker.on('picker.valuechange', function (selectedVal, selectedIndex) {
            console.log(selectedVal);
            console.log(selectedIndex);
        });

        nameEl.addEventListener('click', function () {
            picker.show();
        });
    </script>

</body>

</html>